<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" style="margin: 5px 8px;" @click="addfirst">添加权限</el-button>
      <el-table :data="permissionlist" style="width: 100%" row-key="id" default-expand-all>
        <el-table-column label="名称" width="180" prop="name">
        </el-table-column>
        <el-table-column label="标识" width="180" prop="code">
        </el-table-column>
        <el-table-column label="描述" prop="description">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" v-if="row.type === 1" @click="addperbtn(row.id)">添加</el-button>
            <el-button type="text" size="mini" @click="setbyid(row.id)">编辑</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？"  @onConfirm="delper(row.id)">
                <el-button style="margin-left: 5px;" slot="reference" size="mini" type="text">删除</el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加权限对话框 -->
    <el-dialog title="添加权限" :visible.sync="addperisshow" width="30%" @close="close">
      <el-form :model="addperfrom" :rules="addperrule" ref="refaddper" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="addperfrom.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="addperfrom.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="addperfrom.description"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="addperfrom.enVisible" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addquery">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑权限对话框 -->
    <el-dialog title="添加权限" :visible.sync="uppershow" width="30%" @close="upclose()">
      <el-form :model="upperfrom" ref="upperref" :rules="upperrule" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="upperfrom.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="upperfrom.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="upperfrom.description"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="upperfrom.enVisible" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upclose()">取 消</el-button>
        <el-button type="primary" @click="upquery">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getperdata, addper, getperbyid, upperbyid,delper } from '@/api/permission';
import { listchangetree } from '@/utils';
export default {
  name: 'Permission',
  data() {
    return {
      //原始的权限列表数据
      perlist: [],
      //权限数据
      permissionlist: [],
      //添加权限对象话框
      addperisshow: false,
      addperfrom: {
        name: "",
        code: "",
        description: "",
        type: 2,
        pid: null,
        enVisible: "1"
      },
      //验证规则
      addperrule: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }, {
          validator: (rule, val, cb) => {
            this.perlist.forEach(item => {
              if (item.name === val) cb(new Error('权限名称重复'))
            });
            cb()
          }, trigger: 'blur'
        }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }, {
          validator: (rule, val, cb) => {
            this.perlist.forEach(item => {
              if (item.code === val) cb(new Error('权限标识重复'))
            });
            cb()
          }, trigger: 'blur'
        }],
        description: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],
      },
      //权限详细数据
      periddata: {},
      //编辑权限的表单
      upperfrom: {},
      //编辑表单的校验
      upperrule: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }, {
          validator: (rule, val, cb) => {
            const list = this.perlist.filter(item => item.name !== this.periddata.name)
            list.forEach(item => {
              if (item.name === val) cb(new Error('权限名称重复'))
            });
            cb()
          }, trigger: 'blur'
        }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }, {
          validator: (rule, val, cb) => {
            const list = this.perlist.filter(item => item.code !== this.periddata.code)
            list.forEach(item => {
              if (item.code === val) cb(new Error('权限标识重复'))
            });
            cb()
          }, trigger: 'blur'
        }],
        description: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],
      },
      //编辑权限对话框
      uppershow: false,
      //
    }
  },
  methods: {
    async getperdata() {
      this.perlist = await getperdata()
      this.permissionlist = listchangetree(this.perlist, 0)
    },
    addperbtn(id) {
      this.addperfrom.pid = id
      this.addperisshow = true
    },
    //添加角色添加
    //table数据行里的添加角色
    addquery() {
      this.$refs.refaddper.validate(async isok => {
        if (isok) {
          await addper(this.addperfrom)
          this.$message.success('添加成功')
          this.getperdata()
          this.close()
        }
      })
    },
    //关闭对话框
    close() {
      this.$refs.refaddper.resetFields()
      this.addperisshow = false
      this.addperfrom.type = 2
      this.addperfrom.pid = null
    },
    //type为0 添加权限
    addfirst() {
      //页面左上角的添加角色默认添加路由页面 和 pid=0
      this.addperfrom.type = 1
      this.addperfrom.pid = 0
      this.addperisshow = true
    },
    //根据id获取权限数据
    async setbyid(id) {
      this.uppershow = true
      const res = await getperbyid(id)
      //在vue2中给俩个对象赋值同一个对象时 这两个对象的地址都指向同一个地址 所以当这两个对象中的某一个对象修改属性时,这个两个对象中的该属性都会发生改变
      //使用该方法重新生成一个新对象
      this.periddata = JSON.parse(JSON.stringify(res))
      this.upperfrom = res
    },
    //确认修改
    async upquery() {
      this.$refs.upperref.validate(async isok => {
        if (isok) {
          await upperbyid(this.upperfrom)
          this.$message.success('修改成功')
          this.getperdata()
          this.upclose()
        }
      })

    },
    upclose() {
      this.$refs.upperref.resetFields()
      this.uppershow = false
      this.addperfrom = {
        name: "",
        code: "",
        description: "",
        type: 2,
        pid: null,
        enVisible: "1"
      }
    },
    //删除角色
   async delper(id){
     await delper(id) 
     this.$message.success('删除成功')
     this.getperdata()
    }
  },
  created() {
    this.getperdata()
  },

}
</script>
